<template>
  <div class="JNPF-common-layout">
     <div class="JNPF-preview-main">
      <div style="display: flex;">
        <div id="chart1" style="width:400px;height:400px;"></div>
        <div id="chart2" style="width:400px;height:400px;"></div>
        <div id="chart3" style="width:400px;height:400px;"></div>
        <div id="chart4" style="width:400px;height:400px;"></div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import request from '@/utils/request'
import resize from '@/components/Charts/mixins/resize'
export default {
  components: {},
  mixins: [resize],
  props: {},
  data() {
    return {
      chart1: null,
      chart2: null,
      chart3: null,
      chart4: null,
    };
  },
  created() { },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      request({
        url: `/api/example/Bususefee/getEchartsPieData`,
        method: 'get'
      }).then(res => {
        console.log(res)
        //获取数据赋值给option
        const option1 = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            left: 'center',
            top: 'bottom',
            data: ['剩余费用', '招待费']
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: '50%',
              center: ['50%', '50%'],
              data: [
                { value: res.data.receivefeeResidue, name: '剩余费用' },
                { value: res.data.receivefeeSpend, name: '招待费' },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        const option2 = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            left: 'center',
            top: 'bottom',
            data: ['剩余费用', '办公费']
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: '50%',
              center: ['50%', '50%'],
              data: [
                { value: res.data.officefeeResidue, name: '剩余费用' },
                { value: res.data.officefeeSpend, name, name: '办公费' },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        const option3 = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            left: 'center',
            top: 'bottom',
            data: ['剩余费用', '公车费']
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: '50%',
              center: ['50%', '50%'],
              data: [
                { value: res.data.busfeeResidue, name: '剩余费用' },
                { value: res.data.busfeeResidue, name: '公车费' },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        const option4 = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            left: 'center',
            top: 'bottom',
            data: ['剩余费用', '会议费']
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: '50%',
              center: ['50%', '50%'],
              data: [
                { value: res.data.meetingfeeResidue, name: '剩余费用' },
                { value: res.data.meetingfeeSpend, name: '会议费' },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        this.chart1 = echarts.init(document.getElementById('chart1'))
        this.chart2 = echarts.init(document.getElementById('chart2'))
        this.chart3 = echarts.init(document.getElementById('chart3'))
        this.chart4 = echarts.init(document.getElementById('chart4'))
        this.chart1.setOption(option1);
        this.chart2.setOption(option2);
        this.chart3.setOption(option3);
        this.chart4.setOption(option4);
        window.onresize = this.chart1.resize()
        window.onresize = this.chart2.resize()
        window.onresize = this.chart3.resize()
        window.onresize = this.chart4.resize()
      })
    }
  },

}
</script>
<style scoped></style>
